<script setup lang="ts">
useHead({
    titleTemplate: `%s | 动态路由`,
    meta: [
      {
        name: "description",
        content: "Nuxt 动态路由 [目录]/[参数].vue"
      }
    ]
  })

  //获取动态路由参数（使用 useRoute 的 hook 函数）
  const route = useRoute();
  console.log(route.params.dynamic);


  // 思考： 假设需要使用参数 dynamic 后端接口的数据并渲染页面

  // 若想要SEO, 则必须服务端查询并渲染数据(不能在onMounted中请求数据, 使用后useFetch请求，正常渲染数据即可)

  // 若不需要SEO,则只需客户端渲染， 在onMounted中请求数据渲染即可

</script>

<template>
  <div>
    <div class="text-xl">
      动态路由
    </div>
    <div>
      <!-- 在 Nuxt 模板中可以直接使用 $route.params 获取动态路由的参数 -->
      {{  $route.params.dynamic }}
    </div>
  </div>
</template>

<style scoped>

</style>